<template>
  <div>
    <el-card class="box-card">
      <el-breadcrumb separator="/" style="margin-bottom: 20px">
        <el-breadcrumb-item>会议管理 </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/welcome/maintain' }"
          >维修单</el-breadcrumb-item
        >
      </el-breadcrumb>
      <template>
        <el-row :gutter="20">
          <el-col :span="2"> 维修事项1: </el-col>
          <!-- <i s:span="1">  目的地:</i> -->
          <el-col :span="3" class="demo-input-suffix">
            <!-- <el-input
              placeholder="维修事项"
              clearable
              style="display: inline"
              v-model="building.buildingMattersId"
            > -->
            <!-- // <i slot="prefix" class="el-input__icon el-icon-search"></i> -->
            <!-- </el-input> -->
            <el-select v-model="matters1.value"
            @change="towerChange" placeholder="请选择">
              <el-option
                v-for="item in matters1.list"
                :key="item.mattersId"
                :label="item.mattersName"
                :value="item.mattersId"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="2"> 故障地点: </el-col>
          <el-col :span="3">
            <!-- 申请人: -->
            <el-input
              placeholder="故障地点"
              clearable
              prop="buildingAddress"
              v-model="building.buildingAddress"
            >
              <!-- <i slot="prefix" class="el-input__icon el-icon-search"></i> -->
            </el-input>
          </el-col>
          <el-col :span="2"> 联系人名称: </el-col>
          <el-col :span="3">
            <!-- 联系人: -->
            <el-input
              placeholder="联系人名称"
              clearable
              prop="buildingContactsName"
              v-model="building.buildingContactsName"
            >
              <!-- <i slot="prefix" class="el-input__icon el-icon-search"></i> -->
            </el-input>
          </el-col>
          <el-col :span="2"> 发起时间: </el-col>
          <el-col :span="4">
            <el-input
              placeholder="building "
              clearable
              type="date"
              prop="buildingStartdata"
              style="display: inline-flex"
              v-model="building.buildingStartdata"
            >
              <!-- <i slot="prefix" class="el-input__icon el-icon-search"></i> -->
            </el-input>
            ~
            <el-input
              placeholder="building "
              clearable
              type="date"
              prop="buildingStartdata2"
              style="display: inline-flex"
              v-model="building.buildingStartdata2"
            >
              <!-- <i slot="prefix" class="el-input__icon el-icon-search"></i> -->
            </el-input>
          </el-col>
          <el-col :span="7">
            <el-button
              type="primary"
              icon="el-icon-search"
              style="display: inline"
              @click="search"
              >搜索</el-button
            >
          </el-col>

          <el-col :span="3">
            <el-button type="primary" @click="showAddDialog"
              ><i class="el-icon-plus"></i>添加</el-button
            >
          </el-col>
          <el-col :span="7">
            <el-button
              type="primary"
              icon="el-icon-search"
              style="display: inline"
              @click="exportData"
              >导出</el-button
            > 
          </el-col>
          <!-- <el-badge  v-model="did" class="item">
            <el-button size="small" @click="showAddDialogs">回复</el-button>
          </el-badge> -->
        </el-row>
      </template>
      <!-- <el-dialog
        title="车辆预定:  "
        :close-on-click-modal="false"
        :visible.sync="addDialogVisible"
        :show-close="true"
      >
        <el-form :model="car" ref="car" :rules="rules">
          <el-form-item
            label="发车时间"
            prop="departureTime"
            :label-width="formLabelWidth"
          >
          
            <el-date-picker
              v-model="car.departureTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="发车时间"
              default-time="12:00:00"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label="回程时间"
            prop="flybackTime"
            :label-width="formLabelWidth"
          >
         
            <el-date-picker
              v-model="car.flybackTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="回程时间"
              default-time="12:00:00"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label="目的地"
            prop="destination"
            :label-width="formLabelWidth"
          >
            <el-input v-model="car.destination"></el-input>
          </el-form-item>
          <el-form-item
            label="乘车人数"
            prop="price"
            :label-width="formLabelWidth"
          >
            <el-input v-model="car.price"></el-input>
          </el-form-item>
          <el-form-item
            label="联系人"
            prop="contactsName"
            :label-width="formLabelWidth"
          >
            <el-input v-model="car.contactsName"></el-input>
          </el-form-item>
          <el-form-item
            label="联系手机"
            prop="phone"
            :label-width="formLabelWidth"
          >
            <el-input v-model="car.phone"></el-input>
          </el-form-item>
          <el-form-item
            label="司机性质"
            prop="driver"
            :label-width="formLabelWidth"
          >
          
            <el-radio-group v-model="car.driver">
              <el-radio :label="0">全程</el-radio>
              <el-radio :label="1">接人</el-radio>
              <el-radio :label="2">送 </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="是否过夜"
            prop="overnight"
            :label-width="formLabelWidth"
          >
        
            <el-radio v-model="car.overnight" :label="0">否</el-radio>
            <el-radio v-model="car.overnight" :label="1">是</el-radio>
          </el-form-item>
          <el-form-item
            label="要求："
            prop="requirements"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="car.requirements"
              type="textarea"
              :rows="5"
              resize="none"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addUser('car')">保存</el-button>
        </div>
      </el-dialog> -->

      <el-dialog
        title="楼宇维修:  "
        :close-on-click-modal="false"
        :visible.sync="addDialogVisible"
        :show-close="true"
      >
        <div>
          <h4>请填写您需要维修的相关内容</h4>
        </div>

        <el-form :model="building" ref="building" :rules="rules">
          <el-form-item
            label="维修事项"
            prop="buildingMattersId"
            :label-width="formLabelWidth"
          >
            <el-select
              v-model="matters.value"
              @change="towerChange"
              placeholder="请选择"
            >
              <el-option
                v-for="item in matters.list"
                :key="item.mattersId"
                :label="item.mattersName"
                :value="item.mattersId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="故障地点"
            prop="buildingAddress"
            :label-width="formLabelWidth"
          >
            <el-input v-model="building.buildingAddress"></el-input>
          </el-form-item>

          <el-form-item
            label="联系人"
            prop="buildingContactsName"
            :label-width="formLabelWidth"
          >
            <el-input v-model="building.buildingContactsName"></el-input>
          </el-form-item>

          <el-form-item
            label="联系手机"
            prop="buildingPhone"
            :label-width="formLabelWidth"
          >
            <el-input v-model="building.buildingPhone"></el-input>
          </el-form-item>

          <el-form-item
            label="故障描述"
            prop="buildingDistribution"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="building.buildingDistribution"
              type="textarea"
              :rows="5"
              resize="none"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addUser('building')">保存</el-button
          >crud
        </div>
      </el-dialog>

      <!-- <el-dialog
        title="车辆预定详情"
        :close-on-click-modal="false"
        :visible.sync="editDialogVisible"
        :show-close="true"
      >
        <el-form :model="car" ref="car" :rules="rules">
          <el-form-item
            label="部门名称"
            prop="car.id"
            :label-width="formLabelWidth"
          >
            <el-input v-model="car.id"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="updateUser('user')">保存</el-button>
        </div> 
      </el-dialog> -->
      <el-table border :data="tableData" style="width: 100%; margin-top: 20px">
        <el-table-column
          prop="buildingAddress"
          label="故障地址"
        ></el-table-column>
        <el-table-column
          prop="buildingDistribution"
          label="故障描述"
        ></el-table-column>
        <el-table-column
          prop="buildingDepartmentName"
          label="归属部门"
        ></el-table-column>
        <el-table-column
          prop="buildingContactsName"
          label="联系人"
        ></el-table-column>
        <el-table-column
          prop="buildingPhone"
          label="联系人电话"
        ></el-table-column>
        <el-table-column
          prop="buildingStartdata"
          label="发起时间"
        ></el-table-column>
        <el-table-column
          prop="buildingStaticName"
          label="处理状态"
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
          <el-button type="info" plain size="small" style="margin-bottom: 20px"
          @click="deletes(scope.row)"
            >取消</el-button
          >
          <el-popover placement="top-start" width="200" trigger="hover">
            <!-- <el-row>
                <div style="text-align: center">
                  <el-button
                    type="info"
                    plain
                    size="small"
                    style="margin-bottom: 20px"
                    >短信重发</el-button
                  >
                  <el-button
                    type="info"
                    plain
                    size="small"
                    @click="selectById(scope.row)"
                    >查看详情</el-button
                  ><br />
                  <el-button type="info" plain size="small">打印订单</el-button>
                  <el-button
                    type="info"
                    plain
                    size="small"
                    @click="deletes(scope.row)"
                    >取消订单</el-button
                  >
                </div>slot="reference"
              </el-row> -->

            <!-- <el-button>取消</el-button> -->
          </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <template>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pageIndex"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="params.total"
        >
        </el-pagination>
      </template>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      params: {
        pageSize: 5, // 每页显示5条记录
        pageIndex: 1, // 当前第几页
        total: 0, // 共几条记录去分页
      },
      did: 0,
      building: {
        // 故障地址
        buildingAddress: "",
        // 故障描述
        buildingDistribution: "",
        // 归属部门id
        buildingDepartment: 0,
        // 联系人id
        buildingContactsid: 0,
        // 归属部门名称
        buildingDepartmentName: "",
        // 联系人名称
        buildingContactsName: "",
        //维修事项Id
        buildingMattersId: 0,
        // 联系人电话
        buildingPhone: "",
        // 发起时间
        buildingStartdata: "",
        // 发起时间2
        buildingStartdata2: "",
        // 处理状态Id
        buildingStatic: 0,
        // 处理状态Name
        buildingStaticName: "",
        //维修事项名称
        buildingMattersName: "",
        //Id
        buildingId:0
      },
      matters: {
        list: [],
        // mattersId:0,
        // mattersName:"",
        value: "",
      },
      matters1: {
        list: [],
        // mattersId:0,
        // mattersName:"",
        value: "",
      },
      addDialogVisible: false,
      editDialogVisible: false,
      formLabelWidth: "120px",
      rules: {
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              if (
                /^(13[0-9]|14[0-9]|15[0-9]|16[6]|18[0-9]|19[6,9]|17[0-9])\d{8}$/i.test(
                  value
                ) == false
              ) {
                callback(new Error("请输入手机号"));
              } else {
                //校验通过
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  // mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
  mounted() {
    this.search();
    this.ss();
  },
  methods: {
      // 导出数据
      exportData() {
      // 1.定义表头对应关系
      const headers = {
        'Id': 'buildingId',
        '故障地址': 'buildingAddress',
        '故障描述': 'buildingDistribution',
        '归属部门id': 'buildingDepartment',
        '联系人id': 'buildingContactsid',
        '归属部门名称': 'buildingDepartmentName',
        '联系人名称': 'buildingContactsName',
        '维修事项Id': 'buildingMattersId',
        '联系人电话': 'buildingPhone',
        '发起时间': 'buildingStartdata',
        '发起时间2': 'buildingStartdata2',
        '处理状态Id': 'buildingStatic',
        '处理状态Name': 'buildingStaticName',
    
        '维修事项名称': 'buildingMattersName',
       


      }
      // 懒加载
      import('@/excel/Export2Excel').then(async excel => {
        // excel是引入文件（也就是@/ventor/Export2Excel）的导出对象
        // 获取所有的数据
        const  rows  =this.tableData;
        // console.log(rows);
    
        const data = this.formatJson(headers, rows) // 返回的data就是我们转化后的数据
        excel.export_json_to_excel({
          // 要求转出的表头是中文
          header: Object.keys(headers), // 表头 必填
          data, // //具体数据 必填
          filename: '楼宇维修excel', // 非必填
          autoWidth: true, // 非必填
          bookType: 'xlsx' // 非必填
        })
        // 拿到的数据是这种
        //  [{ username: 'xxx', mobile: 'xxx', ... }, { username: 'xxx', mobile: 'xxx', ... }]
        // 要转化的是如下这种
        // header: ['姓名', '手机号', '入职日期', ...]
        // data: [['张三', '138xxxxxxxx', '1992-08-04', ...], ['李四', '135xxxxxxxx', '1992-08-04', ...]]
      })
    },
    formatJson(headers, rows) {
      return rows.map(item => {
        // console.log(item)
        return Object.keys(headers).map(k => {
          if (headers[k] === 'timeOfEntry' || headers[k] === 'correctionTime') {
            return formatDate(item[headers[k]]) // 返回格式化之前的时间
          } else if (headers[k] === 'formOfEmployment') {
            return EmployeeEnum.hireType[item.formOfEmployment] ? EmployeeEnum.hireType[item.formOfEmployment] : '未知'
          }
          return item[headers[k]]
        })
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.params.pageSize = val;
      this.search();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.pageIndex = val;
      this.search();
    },
    async search() {
      const url = "/vueboot/building/page";
      const { data: res } = await this.$ajax.get(url, {
        params: {
          pageIndex: this.params.pageIndex,
          limit: this.params.pageSize,
          buildingAddress:this.building.buildingAddress,
          buildingContactsName:this.building.buildingContactsName,
          buildingStartdatas:this.building.buildingStartdata,
          buildingStartdatas2:this.building.buildingStartdata2,
          buildingMattersId:this.building.buildingMattersId,
        },
        headers: {
          token: localStorage.getItem("token"),
        },
      });
      console.log(res);
      this.tableData = res.data.records;
      this.params.total = res.data.total;
    },
    async ss() {
      const url = "/vueboot/matters/list";
      const { data: res } = await this.$ajax.get(url, {
        headers: {
          token: localStorage.getItem("token"),
        },
      });
      console.log(res);
      this.matters.list = res.data;
      this.matters1.list = res.data;
      console.log(this.matters.list);
    },
    towerChange(e) {
      //获取的值和id
      console.log(e);
      this.building.buildingMattersId = e;
    },

    showAddDialog() {
      this.addDialogVisible = true;
    },
    // showAddDialogs() {
    //   this.addDialogVisibles = true;
    // },
    addUser(building) {
      this.$refs[building].validate(async (valid) => {
        if (valid) {
          const url = "/vueboot/building/add";
          const { data: res } = await this.$ajax.post(
            url,
            this.building,

            {
              // data:car,
              headers: {
                token: localStorage.getItem("token"),
              },
            }
          );
          console.log(res);
          if (res.data > 0) {
            this.$message({
              message: "添加成功",
              type: "success",
            });
            this.addDialogVisible = false;
            
            this.building = {
              // 故障地址
              buildingAddress: "",
              // 故障描述
              buildingDistribution: "",
              // 归属部门id
              buildingDepartment: 0,
              // 联系人id
              buildingContactsid: 0,
              // 归属部门名称
              buildingDepartmentName: "",
              // 联系人名称
              buildingContactsName: "",
              //维修事项Id
              buildingMattersId: 0,
              // 联系人电话
              buildingPhone: "",
              // 发起时间
              buildingStartdata: "",
              // 处理状态Id
              buildingStatic: 0,
              // 处理状态Name
              buildingStaticName: "",
              //维修事项名称
              buildingMattersName: "",
              buildingId:0
            };
            this.search();
          } else {
            this.$message.error(res.msg);
            //  this.$message.error("添加失败");
          }
        }
      });
    },
      // 根据id删除
      async deletes(row) {
        console.log(row);
        const url = "/vueboot/building/deleteById";
        const { data: res } = await this.$ajax.get(url, {
          params: {
            buildingId: row.buildingId,
          },
          headers: {
            token: localStorage.getItem("token"),
          },
        });
        if (res.data > 0) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.search();
        } else {
          this.$message.error(res.msg);
        }
      },
    //   // 根据id查看用户
    //   async selectById(row) {
    //     console.log(row);
    //     const url = "/vueboot/car/selectById";
    //     const { data: res } = await this.$ajax.get(url, {
    //       params: {
    //         id: this.id,
    //       },
    //       headers: {
    //         token: localStorage.getItem("token"),
    //       },
    //     });
    //     if (res > 0) {
    //       this.$message({
    //         message: "修改成功",
    //         type: "success",
    //       });
    //       this.editDialogVisible = false;
    //       this.search();
    //     } else {
    //       this.$message.error("修改失败");
    //     }

    //     // this.user.usrName = row.usrName
    //     // this.did = row.usrId
    //     this.editDialogVisible = true;
    //   },
  },
};
</script>
<style>
.breadcrumb {
  height: 30px;
}
</style>
